class Soccer {
    constructor(obj) {
        this.fieldWidth = 400;
        this.fieldHeight = 180;
        this.language = obj.lang;
        this.home = obj.home;
        this.away = obj.away;
        window.lastData = null;

        this.word = {
            en: {
                "主队": "Home",
                "客队": "Away",
                "正中靶心": "On Goal",
                "进球数": "Score",
                "黄牌数": "Yellow Card",
                "红牌数": "Red Card",
                "危险进攻": "Dangerous attack",
                "进攻": "Attack",
                "控球": "In possession",
                "进球": "Goal",
                "角球": "Corner",
                "黄牌": "Yellow card",
                "红牌": "Red card",
                "球门球": "Goal kick",
                "判点球给": "Penalty",
                "危险任意球": "Dangerous free kick",
                "任意球": "Free kick",
                "射中点球": "Shootout score",
                "射失点球": "Shootout miss",
                "点球": "Shootout to take",
                "射正球门": "Shot on target",
                "射偏球门": "Shot off target",
                "更换替补": "Substitution",
                "射失点球": "Penalty missed",
                "界外球": "Throw",
                "受伤": "Injury",
                "越位": "Offside",
                "可能进球": "Possible goal",
                "审查中": "In progress",
                "审查红牌": "Reviewing red card",
                "审查进球": "Reviewing goal",
                "审查点球": "Reviewing penalty",
                "可能红牌": "Possible red card",
                "可能进球": "Possible goal",
                "可能点球": "Possible penalty",
                "无红牌": "Check complete no red card",
                "进球无效": "Check complete no goal",
                "无点球": "Check complete no penalty",
                "上半场": "Kick off",
                "半场结束": "Half time",
                "下半场": "Second Half",
                "全场结束": "Full time",
                "加时赛上半场": "Start extra time 1",
                "加时赛半场结束": "Extra time half time",
                "加时赛下半场": "Start extra time 2",
                "加时赛结束": "End of extra time",
                "点球大战": "Penalty shootout",
                "伤停补时": "Injury time"
            },
            zh: {
                "主队": "主队",
                "客队": "客队",
                "正中靶心": "正中靶心",
                "进球数": "进球数",
                "黄牌数": "黄牌数",
                "红牌数": "红牌数",
                "危险进攻": "危险进攻",
                "进攻": "进攻",
                "控球": "控球",
                "进球": "进球",
                "角球": "角球",
                "黄牌": "黄牌",
                "红牌": "红牌",
                "球门球": "球门球",
                "判点球给": "判点球给",
                "危险任意球": "危险任意球",
                "任意球": "任意球",
                "射中点球": "射中点球",
                "射失点球": "射失点球",
                "点球": "点球",
                "射正球门": "射正球门",
                "射偏球门": "射偏球门",
                "更换替补": "更换替补",
                "射失点球": "射失点球",
                "界外球": "界外球",
                "受伤": "受伤",
                "越位": "越位",
                "可能进球": "可能进球",
                "审查中": "审查中",
                "审查红牌": "审查红牌",
                "审查进球": "审查进球",
                "审查点球": "审查点球",
                "可能红牌": "可能红牌",
                "可能进球": "可能进球",
                "可能点球": "可能点球",
                "无红牌": "无红牌",
                "进球无效": "进球无效",
                "无点球": "无点球",
                "上半场": "上半场",
                "半场结束": "半场结束",
                "下半场": "下半场",
                "全场结束": "全场结束",
                "加时赛上半场": "加时赛上半场",
                "加时赛半场结束": "加时赛半场结束",
                "加时赛下半场": "加时赛下半场",
                "加时赛结束": "加时赛结束",
                "点球大战": "点球大战",
                "伤停补时": "伤停补时",
            }
        }

        this.lastData = {
            "PG": "",
            "VC": "",
            "XY": ""
        }

        this.passBallCount = 1;//连续传球次数

        this.playerName = '测试球员';
        this.playerNameEn = 'testplayer';
        this.delaySecond = 1; // 获取数据间隔延迟秒数
    }

    addWord(lang = 'zh', obj) {
        this.word[lang] = Object.assign({}, this.word[lang], obj);
    }

    random(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    //清理屏幕 把上一个动画的元素隐藏
    clearScreen() {
        $('#ball').css({ 'opacity': 0 });
        $('.ml1-CommonAnimations_H2TextWrapper').css('opacity', 0);
        $('.ml1-CommonAnimations_Line').css('opacity', 0);
        $('#playerName').css('opacity', 0);
        $('#ml1-Possession1').css('opacity', 0);
        $('#ml1-ShotBase').css('opacity', 0);
        $('#ml1-ThrowRadial').css('opacity', 0);

    }

    test() {
        console.log(anime);
        setTimeout(function () {
            soccer.attack0();
        }, 0);

        setTimeout(function () {
            soccer.attack1();
        }, 2000);

        setTimeout(function () {
            soccer.attack2();
        }, 4000);

        setTimeout(function () {
            soccer.goal();
        }, 6000);

        setTimeout(function () {
            soccer.clearScreen();
        }, 8000);
    }

    record(data = {
        "PG": "",
        "VC": "21002",
        "XY": "0.68,0.49"
    }) {
        //记录上一次的动作，如果是传球的话 需要连续绘制路径
        this.lastData = data;
    }

    position(data = {
        "PG": "",
        "VC": "21002",
        "XY": "0.68,0.49"
    }) {
        this.refresh();

        // $('#ballPosition').css('opacity', 1);
        anime({
            targets: '#ballPosition',
            opacity: 1,
            duration: 1000,
            easing: 'easeInOutQuad',
            left: data.XY.split(',')[0] * this.fieldWidth,
            top: data.XY.split(',')[1] * this.fieldHeight,
        })

    }

    redCard(team = 'home') {
        this.refresh();

        anime({
            targets: '.redcard',
            opacity: 1,
            duration: 1000,
            easing: 'easeInOutQuad',
        });

        if (team == 'home') {
            $('#playerName').css('opacity', 0);
            $('#playerName').css('text-align', 'center');
            $('#ballAction').css('opacity', 1);
            $('.ml1-CommonAnimations_H2TextWrapper').css('opacity', 1);
            $('.ml1-CommonAnimations_H2TextWrapper').css('width', '100%');
            $('.ml1-CommonAnimations_H2TextWrapper').css('left', '60');
            $('.ml1-CommonAnimations_H2TextWrapper').css('text-align', 'right');

            anime({
                targets: ['.ml1-CommonAnimations_H2TextWrapper'],
                opacity: [0, 1],
                left: -60,
                easing: 'easeInQuad',
                duration: 500,
            });
        }

        if (team == 'away') {
            $('#playerName').css('opacity', 0);
            $('#playerName').css('text-align', 'center');
            $('#ballAction').css('opacity', 1);
            $('.ml1-CommonAnimations_H2TextWrapper').css('opacity', 1);
            $('.ml1-CommonAnimations_H2TextWrapper').css('width', '100%');
            $('.ml1-CommonAnimations_H2TextWrapper').css('left', '60');
            $('.ml1-CommonAnimations_H2TextWrapper').css('text-align', 'left');

            anime({
                targets: ['.ml1-CommonAnimations_H2TextWrapper'],
                opacity: [0, 1],
                left: 60,
                easing: 'easeInQuad',
                duration: 500,
            });
        }


    }

    yellowCard(team = 'home') {
        this.refresh();

        anime({
            targets: '.yellowcard',
            opacity: 1,
            duration: 1000,
            easing: 'easeInOutQuad',
        });

        if (team == 'home') {
            $('#playerName').css('opacity', 0);
            $('#playerName').css('text-align', 'center');
            $('#ballAction').css('opacity', 1);
            $('.ml1-CommonAnimations_H2TextWrapper').css('opacity', 1);
            $('.ml1-CommonAnimations_H2TextWrapper').css('width', '100%');
            $('.ml1-CommonAnimations_H2TextWrapper').css('left', '60px');
            $('.ml1-CommonAnimations_H2TextWrapper').css('text-align', 'right');

            anime({
                targets: ['.ml1-CommonAnimations_H2TextWrapper'],
                opacity: [0, 1],
                left: -60,
                easing: 'easeInQuad',
                duration: 500,
            });
        }

        if (team == 'away') {
            $('#playerName').css('opacity', 0);
            $('#playerName').css('text-align', 'center');
            $('#ballAction').css('opacity', 1);
            $('.ml1-CommonAnimations_H2TextWrapper').css('opacity', 1);
            $('.ml1-CommonAnimations_H2TextWrapper').css('width', '100%');
            $('.ml1-CommonAnimations_H2TextWrapper').css('right', '-60');
            $('.ml1-CommonAnimations_H2TextWrapper').css('text-align', 'left');

            anime({
                targets: ['.ml1-CommonAnimations_H2TextWrapper'],
                opacity: [0, 1],
                left: 60,
                easing: 'easeInQuad',
                duration: 500,
            });
        }



    }


    move(data = {
        "PG": "",
        "VC": "1-Attack",
        "XY": "0.68,0.49"
    }) {
        console.log('nowdata',data);
        console.log('lastdata',this.lastData);
        function getRandomFloat(min, max) {
            return Math.random() * (max - min) + min;
        }
        if (['1-DangerousAttack', '1-Attack', '1-InPossession', '2-DangerousAttack', '2-Attack', '2-InPossession'].includes(data.VC)) {
            // 必须是连续传球的后续且是同一个队才会不清空屏幕保留轨迹绘制
            if (['1-DangerousAttack', '1-Attack', '1-InPossession', '2-DangerousAttack', '2-Attack', '2-InPossession'].includes(this.lastData.VC) &&
                data.VC[0] == this.lastData.VC[0]
            ) {

                this.passBallCount++;
                if (this.passBallCount > 5) {
                    var removeIndex = this.passBallCount - 5;
                    var oldLine = document.querySelector('#animatedLine' + removeIndex);
                    if (oldLine) {
                        oldLine.style.opacity = 0;  // 隐藏
                    }
                }

                setTimeout(function () {
                    $('.moveLine').css('opacity', 1);
                }, 1);
                console.log('连续传球', this.passBallCount);

                var sx = ''
                var sy = ''
                var dx = ''
                var dy = ''

                sx = this.lastData.XY.split(',')[0];
                sy = this.lastData.XY.split(',')[1];

                dx = data.XY.split(',')[0];
                dy = data.XY.split(',')[1]

                // document.body.innerHTML += `<p>连续传球，${this.passBallCount} dx: ${dx}, dy: ${dy}, sx: ${sx}, sy: ${sy}</p>`;
                sx = parseInt(sx * this.fieldWidth);
                sy = parseInt(sy * this.fieldHeight);

                dx = parseInt(dx * this.fieldWidth);
                dy = parseInt(dy * this.fieldHeight);

                document.querySelector('#animatedLine' + this.passBallCount).setAttribute('x1', sx)
                document.querySelector('#animatedLine' + this.passBallCount).setAttribute('y1', sy)

                anime({
                    targets: '#animatedLine' + this.passBallCount,
                    x2: [sx, dx],
                    y2: [sy, dy],
                    duration: 2000,
                    opacity: 1,
                    easing: 'easeInOutQuad',
                });


                anime({
                    targets: '#ballPosition',
                    opacity: 1,
                    duration: 1,
                    easing: 'easeInOutQuad',
                    left: [sx-5, dx - 5],
                    top: [sy-5, dy - 5],
                    // left: [sx,data.XY.split(',')[0] * this.fieldWidth+2],
                    // top: [ sy,data.XY.split(',')[1] * this.fieldHeight+2],
                })


            }

            // 其余的包括上一个动作不是传球，或者上一个动作不是一个队的，都作为第一次传球处理
            else {
                console.log('第一脚传球');
                this.passBallCount = 1;

                dx = data.XY.split(',')[0];
                dy = data.XY.split(',')[1]

                setTimeout(function () {
                    $('.moveLine').css('opacity', 0);
                    for(var i=1;i<=10;i++){
                        document.querySelector('#animatedLine' + i).style.opacity = 0;  // 隐藏
                    }
                }, 1);

                anime({
                    targets: '#ballPosition',
                    opacity: 1,
                    duration: 1,
                    easing: 'easeInOutQuad',
                    left: dx * this.fieldWidth - 5,
                    top: dy * this.fieldHeight - 5,
                    // left: [sx,data.XY.split(',')[0] * this.fieldWidth+2],
                    // top: [ sy,data.XY.split(',')[1] * this.fieldHeight+2],
                })

                 
            }
        }else{
            this.passBallCount = 0;
            this.refresh();
        }
        this.record(data);

         

    }

    // 球门球
    goalKick(type = 1) {
        this.refresh();

        var x = ''
        var y = ''
        var r = '' // 旋转角度

        if (type == 1) {
            x = 0
            y = 90
            r = 0

            $('#playerName').css('opacity', 1);
            $('#playerName').css('text-align', 'center');

            $('#ballAction').css('opacity', 1);
            $('.ml1-CommonAnimations_H2Text').text(this.word[this.language]['球门球']);
            $('#playerName').text(this.home);

        }

        if (type == 2) {
            x = 400
            y = 90
            r = 180

            $('#playerName').css('opacity', 1);
            $('#playerName').css('text-align', 'center');

            $('#ballAction').css('opacity', 1);
            $('.ml1-CommonAnimations_H2Text').text(this.word[this.language]['球门球']);
            $('#playerName').text(this.away);

        }


        $('#ml1-WideKickRadial').css({ 'opacity': 1 });
        document.getElementById("ml1-WideKickRadial").style.transform = `translate(${x}px, ${y}px)  rotate(${r}deg)`

        $('#ball').css({ 'opacity': 1 });


        anime({
            targets: '#ball',
            left: x,
            top: y,
            easing: 'easeInOutSine',
            duration: 1,
        });

        anime({
            targets: '#ml-WideKickRadial',
            opacity: 1,
            easing: 'easeInOutSine',
            duration: 1,
        });

        anime.timeline({
            loop: true
        }).add({
            targets: ['#ml1-WideKickRadialOuter', '#ml1-WideKickRadialCentre', '#ml1-WideKickRadialInner'],
            scaleX: [0, 1],
            scaleY: [0, 1],
            duration: 1000,
            easing: 'linear'
        })

    }

    //任意球，动画开角42度
    freeKick(data = {
        "PG": "",
        "VC": "1-FreeKick",
        "XY": "0.68,0.49"
    }) {
        this.refresh();

        console.log('任意球');


        // 解析并转换坐标
        var [x, y] = data.XY.split(',').map(Number);
        x = x * this.fieldWidth;
        y = y * this.fieldHeight;

        var targetX, targetY;

        if (data.VC[0] == "1") {
            // 右边线中点
            targetX = this.fieldWidth;
            targetY = this.fieldHeight / 2;
        } else {
            // 左边线中点
            targetX = 0;
            targetY = this.fieldHeight / 2;
        }

        // 计算角度
        var dx = targetX - x;
        var dy = targetY - y;
        var r = Math.atan2(dy, dx) * (180 / Math.PI);

        // 统一角度范围为 0 - 360 度
        r = (r + 360) % 360;  // 旋转角度，从水平线顺时针计算角度，90就代表动画开角中间线朝下垂直于水平线，270或者-90就代表动画开角中间线朝上垂直于水平线


        if (data.VC === "1-FreeKick") {
            $('#playerName').css('opacity', 1);
            $('#playerName').css('text-align', 'center');

            $('#ballAction').css('opacity', 1);
            $('.ml1-CommonAnimations_H2Text').text(this.word[this.language]['任意球']);
            $('#playerName').text(this.home);
        }

        if (data.VC === "2-FreeKick") {
            $('#playerName').css('opacity', 1);
            $('#playerName').css('text-align', 'center');

            $('#ballAction').css('opacity', 1);
            $('.ml1-CommonAnimations_H2Text').text(this.word[this.language]['任意球']);
            $('#playerName').text(this.away);
        }

        if (data.VC === "1-DangerousFreeKick") {
            $('#playerName').css('opacity', 1);
            $('#playerName').css('text-align', 'center');

            $('#ballAction').css('opacity', 1);
            $('.ml1-CommonAnimations_H2Text').text(this.word[this.language]['危险任意球']);
            $('#playerName').text(this.home);
        }

        if (data.VC === "2-DangerousFreeKick") {
            $('#playerName').css('opacity', 1);
            $('#playerName').css('text-align', 'center');

            $('#ballAction').css('opacity', 1);
            $('.ml1-CommonAnimations_H2Text').text(this.word[this.language]['危险任意球']);
            $('#playerName').text(this.away);
        }

        $('#ml1-NarrowKickRadial').css({ 'opacity': 1 });
        document.getElementById("ml1-NarrowKickRadial").style.transform = `translate(${x}px, ${y}px)  rotate(${r}deg)`

        $('#ball').css({ 'opacity': 1 });


        anime({
            targets: '#ball',
            left: x,
            top: y,
            easing: 'easeInOutSine',
            duration: 1,
        });

        anime({
            targets: '#ml-NarrowKickRadial',
            opacity: 1,
            easing: 'easeInOutSine',
            duration: 1,
        });

        anime.timeline({
            loop: true
        }).add({
            targets: ['#ml1-NarrowKickRadialOuter', '#ml1-NarrowKickRadialCentre', '#ml1-NarrowKickRadialInner'],
            scaleX: [0, 1],
            scaleY: [0, 1],
            duration: 1000,
            easing: 'linear'
        })
    }


    //界外球，动画开角76度
    throw(data = {
        "PG": "",
        "VC": "1-Throw",
        "XY": "0.68,0.49"
    }) {
        this.refresh();

        console.log('界外球');

        // 解析并转换坐标
        var [x, y] = data.XY.split(',').map(Number);
        x = x * this.fieldWidth;
        y = y * this.fieldHeight;

        var targetX, targetY;

        if (data.VC[0] == "1") {
            // 右边线中点
            targetX = this.fieldWidth;
            targetY = this.fieldHeight / 2;
        } else {
            // 左边线中点
            targetX = 0;
            targetY = this.fieldHeight / 2;
        }

        // 计算角度
        var dx = targetX - x;
        var dy = targetY - y;
        var r = Math.atan2(dy, dx) * (180 / Math.PI);

        // 统一角度范围为 0 - 360 度
        r = (r + 360) % 360; // 旋转角度，从水平线顺时针计算角度，90就代表动画开角中间线朝下垂直于水平线，270或者-90就代表动画开角中间线朝上垂直于水平线


        if (data.VC[0] === "1") {
            $('#playerName').css('opacity', 1);
            $('#playerName').css('text-align', 'center');

            $('#ballAction').css('opacity', 1);
            $('.ml1-CommonAnimations_H2Text').text(this.word[this.language]['界外球']);
            $('#playerName').text(this.home);
        }

        if (data.VC[0] === "2") {
            $('#playerName').css('opacity', 1);
            $('#playerName').css('text-align', 'center');

            $('#ballAction').css('opacity', 1);
            $('.ml1-CommonAnimations_H2Text').text(this.word[this.language]['界外球']);
            $('#playerName').text(this.away);
        }


        $('#ml1-ThrowRadial').css({ 'opacity': 1 });
        document.getElementById("ml1-ThrowRadial").style.transform = `translate(${x}px, ${y}px)  rotate(${r}deg)`

        $('#ball').css({ 'opacity': 1 });


        anime({
            targets: '#ball',
            left: x,
            top: y,
            easing: 'easeInOutSine',
            duration: 1,
        });

        anime({
            targets: '#ml-ThrowRadial',
            opacity: 1,
            easing: 'easeInOutSine',
            duration: 1,
        });

        anime.timeline({
            loop: true
        }).add({
            targets: ['#ml1-ThrowRadialOuter', '#ml1-ThrowRadialInner'],
            scaleX: [0, 1],
            scaleY: [0, 1],
            duration: 1000,
            easing: 'linear'
        }).add({
            targets: ['#ml1-ThrowRadialOuter', '#ml1-ThrowRadialInner'],
            opacity: 0,
            duration: 1000,
            easing: 'linear'
        });
    }

    // 角球，动画开角40度
    corner(type = 1) {
        this.refresh();
        console.log('角球');

        var padding = 10;

        //12
        //34
        // 分为四个区域的界外球    
        var x = ''
        var y = ''
        var r = '' // 旋转角度，从水平线顺时针计算角度，90就代表动画开角中间线朝下垂直于水平线，270或者-90就代表动画开角中间线朝上垂直于水平线

        //主队上角球，球场右边朝下
        if (type == 1) {
            x = 400
            y = 0
            r = this.random(110, 110);
        }
        //主队下角球，球场右边朝上
        if (type == 2) {
            x = 400
            y = 180
            r = this.random(-110, -110);
        }
        //客队上角球，球场左边朝下
        if (type == 3) {
            x = 0
            y = 0
            r = this.random(70, 70);
        }
        //客队下角球，球场左边朝上
        if (type == 4) {
            x = 0
            y = 180
            r = this.random(-70, -70);
        }

        if (type == 1 || type == 2) {
            $('#playerName').css('opacity', 1);
            $('#playerName').css('text-align', 'center');

            $('#ballAction').css('opacity', 1);
            $('.ml1-CommonAnimations_H2Text').text(this.word[this.language]['角球']);
            $('#playerName').text(this.home);
        }

        if (type == 3 || type == 4) {
            $('#playerName').css('opacity', 1);
            $('#playerName').css('text-align', 'center');

            $('#ballAction').css('opacity', 1);
            $('.ml1-CommonAnimations_H2Text').text(this.word[this.language]['角球']);
            $('#playerName').text(this.away);
        }

        $('#ml1-NarrowKickRadial').css({ 'opacity': 1 });
        document.getElementById("ml1-NarrowKickRadial").style.transform = `translate(${x}px, ${y}px)  rotate(${r}deg)`

        $('#ball').css({ 'opacity': 1 });


        anime({
            targets: '#ball',
            left: x,
            top: y,
            easing: 'easeInOutSine',
            duration: 1,
        });

        anime({
            targets: '#ml-NarrowKickRadial',
            opacity: 1,
            easing: 'easeInOutSine',
            duration: 1,
        });

        anime.timeline({
            loop: true
        }).add({
            targets: ['#ml1-NarrowKickRadialOuter', '#ml1-NarrowKickRadialCentre', '#ml1-NarrowKickRadialInner'],
            scaleX: [0, 1],
            scaleY: [0, 1],
            duration: 1000,
            easing: 'linear'
        })
    }

    //控球
    attack0(team = 'home') {
        this.refresh();
        console.log('attack0',team);

        $('#ml1-Possession1').css('opacity', 0);
        $('#ml1-Possession1-2').css('opacity', 0);

        anime({
            targets: '#ml1-Possession1',
            d: "M2,2 200,2 200,2 C200,1.4 200,28 200,28 C200,29 200,30 200,31 L200,61 L200,88 C200,89 200,90 200,91 L200,121 L200,146 C200,147 200,150 200,151 L200,178 C200,178 2.0,178 2.0,178 L2,2 Z",
            easing: 'easeInQuad',
            duration: 500,
        });

        if (team == 'home') {

            // $('.ml1-CommonAnimations_H1TextWrapper').css('opacity', 0);
            $('.ml1-CommonAnimations_H2TextWrapper').css('opacity', 0);
            $('.ml1-CommonAnimations_Line').css('opacity', 0);

            // $('.ml1-CommonAnimations_H1TextWrapper').css('left', 72);
            // $('.ml1-CommonAnimations_H2TextWrapper').css('left', -95);
            // $('.ml1-CommonAnimations_Line').css('left', 257);


            // $('.ml1-Possession1').css('opacity', 1);
            $('#playerName').css('opacity', 1);
            $('#playerName').css('left', '-240px');
            $('#playerName').css('text-align', 'right');

            $('#ballAction').css('opacity', 1);
            $('#ballAction').css('left', '-240px');
            $('#ballAction').css('text-align', 'right');


            $('#ml1-Possession1').css('opacity', 1);

            $('.ml1-CommonAnimations_H2Text').text(this.word[this.language]['控球']);
            $('#playerName').text(this.home);


            anime({
                targets: ['#playerName'],
                opacity: [0, 1],
                left: [-250, -240],
                easing: 'easeInQuad',
                duration: 500,
            });


            anime({
                targets: ['.ml1-CommonAnimations_H2TextWrapper'],
                opacity: [0, 1],
                left: [-250, -240],
                easing: 'easeInQuad',
                duration: 500,
            });

            anime({
                targets: ['.ml1-CommonAnimations_Line'],
                opacity: [0, 1],
                left: [160, 170],
                easing: 'easeInQuad',
                duration: 500,
            });
        }
        if (team == 'away') {

            // $('.ml1-CommonAnimations_H1TextWrapper').css('opacity', 0);
            $('.ml1-CommonAnimations_H2TextWrapper').css('opacity', 0);
            $('.ml1-CommonAnimations_Line').css('opacity', 1);
            $('.ml1-CommonAnimations_Line').css('left', '370px');

            // $('.ml1-CommonAnimations_H1TextWrapper').css('left', 72);
            // $('.ml1-CommonAnimations_H2TextWrapper').css('left', -95);
            // $('.ml1-CommonAnimations_Line').css('left', 257);


            // $('.ml1-Possession1').css('opacity', 1);
            $('#playerName').css('opacity', 1);
            $('#playerName').css('left', '240px');

            $('#playerName').css('text-align', 'left');

            $('#ballAction').css('opacity', 1);
            $('#ballAction').css('left', '240px');
            $('#ballAction').css('text-align', 'left');


            $('#ml1-Possession1-2').css('opacity', 1);

            $('.ml1-CommonAnimations_H2Text').text(this.word[this.language]['控球']);
            $('#playerName').text(this.away);

            anime({
                targets: ['#playerName'],
                opacity: [0, 1],
                left: [250, 240],
                easing: 'easeInQuad',
                duration: 500,
            });


            anime({
                targets: ['.ml1-CommonAnimations_H2TextWrapper'],
                opacity: [0, 1],
                left: [250, 240],
                easing: 'easeInQuad',
                duration: 500,
            });
            anime({
                targets: ['.ml1-CommonAnimations_Line'],
                opacity: [0, 1],
                left: [240, 230],
                easing: 'easeInQuad',
                duration: 500,
            });
        }
    }

    //普通进攻
    attack1(team = 'home') {
        console.log('attack1',team);

        this.refresh();

        if (team == 'home') {
            $('#playerName').css('opacity', 0);
            $('#ballAction').css('opacity', 0);

            $('#playerName').css('text-align', 'right');
            $('#ballAction').css('text-align', 'right');


            $('#ml1-Possession1').css('opacity', 0);
            $('#ml1-Possession1-2').css('opacity', 0);


            $('#playerName').css('opacity', 1);
            $('#ballAction').css('opacity', 1);
            $('#ml1-Possession1').css('opacity', 1);

            $('#playerName').text(this.home);
            $('.ml1-CommonAnimations_H2Text').text(this.word[this.language]['进攻']);

            anime({
                targets: '#ml1-Possession1',
                d: "M2,2 200,2 200,2 C200,1.4 200,28 200,28 C200,29 200,30 200,31 L200,61 L200,88 C200,89 200,90 200,91 L200,121 L200,146 C200,147 200,150 200,151 L200,178 C200,178 2.0,178 2.0,178 L2,2 Z",
                easing: 'easeInQuad',
                duration: 500,
            });

            anime({
                targets: '#ml1-Possession1',
                d: 'M2,2 267,2 267,2 C267,1.4 278.7,28 278.7,28 C279,29 279,30 278.7,31 L267,61 L278.7,88 C279,89 279,90 278.7,91 L267,121 L278.7,146 C279,147 279,150 278.7,151 L267,178 C267,178 2.0,178 2.0,178 L2,2 Z',
                easing: 'easeInQuad',
                duration: 500,
            });

            anime({
                targets: ['#playerName'],
                opacity: [0, 1],
                left: [-200, -180],
                easing: 'easeInQuad',
                duration: 500,
            });


            anime({
                targets: ['.ml1-CommonAnimations_H2TextWrapper'],
                opacity: [0, 1],
                left: [-200, -180],
                easing: 'easeInQuad',
                duration: 500,
            });
            anime({
                targets: ['.ml1-CommonAnimations_Line'],
                opacity: [0, 1],
                left: [220, 230],
                easing: 'easeInQuad',
                duration: 500,
            });
        }

        if (team == 'away') {
            $('#playerName').css('opacity', 0);
            $('#ballAction').css('opacity', 0);

            $('#playerName').css('text-align', 'left');
            $('#ballAction').css('text-align', 'left');


            $('#ml1-Possession1').css('opacity', 0);
            $('#ml1-Possession1-2').css('opacity', 0);


            $('#playerName').css('opacity', 1);
            $('#ballAction').css('opacity', 1);

            $('#ml1-Possession1-2').css('opacity', 1);

            $('#playerName').text(this.away);
            $('.ml1-CommonAnimations_H2Text').text(this.word[this.language]['进攻']);


            // anime({
            //     targets: '#ml1-Possession1-2',
            //     // d: "M2,2 200,2 200,2 C200,1.4 200,28 200,28 C200,29 200,30 200,31 L200,61 L200,88 C200,89 200,90 200,91 L200,121 L200,146 C200,147 200,150 200,151 L200,178 C200,178 2.0,178 2.0,178 L2,2 Z",
            //     d: "M400,2 200,2 200,2 C200,1.4 200,28 200,28 C200,29 200,30 200,31 L200,61 L200,88 C200,89 200,90 200,91 L200,121 L200,146 C200,147 200,150 200,151 L200,178 C200,178 400,178 400,178 L400,2 Z",
            //     // d: "M200,2 400,2 400,2 C400,1.4 400,28 400,28 C400,29 400,30 400,31 L400,61 L400,88 C400,89 400,90 400,91 L400,121 L400,146 C400,147 400,150 400,151 L400,178 C400,178 200,178 200,178 L200,2 Z",
            //     easing: 'easeInQuad',
            //     duration: 500,
            // });

            anime({
                targets: '#ml1-Possession1-2',
                // d: 'M2,2 267,2 267,2 C267,1.4 278.7,28 278.7,28 C279,29 279,30 278.7,31 L267,61 L278.7,88 C279,89 279,90 278.7,91 L267,121 L278.7,146 C279,147 279,150 278.7,151 L267,178 C267,178 2.0,178 2.0,178 L2,2 Z',
                d: 'M 200,2 133,2 133,2 C133,1.4 122.7,28 122.7,28 C121,29 121,30 121.7,31 L133,61 L121.7,88 C121,89 121,90 121.7,91 L133,121 L121.7,146 C121,147 121,150 121.7,151 L133,178 C133,178 398,178 398,178 L398,2 200,2 Z',
                easing: 'easeInQuad',
                duration: 500,
            });

            anime({
                targets: ['#playerName'],
                opacity: [0, 1],
                left: [200, 180],
                easing: 'easeInQuad',
                duration: 500,
            });


            anime({
                targets: ['.ml1-CommonAnimations_H2TextWrapper'],
                opacity: [0, 1],
                left: [200, 180],
                easing: 'easeInQuad',
                duration: 500,
            });
            anime({
                targets: ['.ml1-CommonAnimations_Line'],
                opacity: [0, 1],
                left: [180, 170],
                easing: 'easeInQuad',
                duration: 500,
            });
        }


    }

    //危险进攻
    attack2(team = 'home') {
        console.log('attack2',team);

        this.refresh();

        this.attack1(team);
        if (team == 'home') {


            $('#playerName').css('text-align', 'right');
            $('#ballAction').css('text-align', 'right');

            // $('.ml1-CommonAnimations_H1TextWrapper').css('opacity', 0);
            $('.ml1-CommonAnimations_H2TextWrapper').css('opacity', 0);
            $('.ml1-CommonAnimations_Line').css('opacity', 0);

            // $('.ml1-CommonAnimations_H1TextWrapper').css('left', 72);
            $('.ml1-CommonAnimations_H2TextWrapper').css('left', 132);
            $('.ml1-CommonAnimations_Line').css('left', 317);

            // <stop class="gradStart" offset="43.8%" style="stop-opacity: 0.4; stop-color: rgb(24, 84, 53);"></stop>
            // <stop class="gradEnd" offset="100%" style="stop-opacity: 0.4; stop-color: rgb(79, 41, 26);"></stop>

            $('#ml1-Gradient1 .gradStart').attr('offset', '43.8%');
            $('#ml1-Gradient1 .gradStart').attr('style', 'stop-opacity: 0.4; stop-color: rgb(24, 84, 53);');

            $('#ml1-Gradient1 .gradEnd').attr('offset', '100%');
            $('#ml1-Gradient1 .gradEnd').attr('style', 'stop-opacity: 0.4; stop-color: rgb(79, 41, 26);');

            $('#playerName').text(this.home);

            $('.ml1-CommonAnimations_H2Text').text(this.word[this.language]['危险进攻']);

            // anime({
            //     targets: '#ml1-Possession1',
            //     d: "M2,2 200,2 200,2 C200,1.4 200,28 200,28 C200,29 200,30 200,31 L200,61 L200,88 C200,89 200,90 200,91 L200,121 L200,146 C200,147 200,150 200,151 L200,178 C200,178 2.0,178 2.0,178 L2,2 Z",
            //     easing: 'easeInQuad',
            //     duration: 500,
            // });

            // anime({
            //     targets: '#ml1-Possession1',
            //     d: 'M2,2 267,2 267,2 C267,1.4 278.7,28 278.7,28 C279,29 279,30 278.7,31 L267,61 L278.7,88 C279,89 279,90 278.7,91 L267,121 L278.7,146 C279,147 279,150 278.7,151 L267,178 C267,178 2.0,178 2.0,178 L2,2 Z',
            //     easing: 'easeInQuad',
            //     duration: 500,
            // });

            // anime({
            //     targets: '#ml1-Possession1',
            //     d: 'M2,2 79,2 79,2 C79,1.4 62,28 62,28 C62,29 62,30 62,31 L79,61 L62,88 C62,89 62,90 62,91 L79,121 L62,146 C62,147 62,150 62,151 L79,178 C79,178 2.0,178 2.0,178 L2,2 Z',
            //     easing: 'easeInQuad',
            //     duration: 500,
            //     // delay: 3000
            // });

            anime({
                targets: '#ml1-Possession1',
                d: 'M2,2 321.04462809917356,2 321.91239669421486,2 C321.91239669421486,1.4 338.40000000000003,28 338.40000000000003,28 C339.26776859504133,29 339.26776859504133,30 338.40000000000003,31 L321.91239669421486,61 L338.40000000000003,88 C339.26776859504133,89 339.26776859504133,90 338.40000000000003,91 L321.91239669421486,121 L338.40000000000003,146 C339.26776859504133,147 339.26776859504133,150 338.40000000000003,151 L321.91239669421486,178 C321.91239669421486,178 2.0,178 2.0,178 L2,2 Z',
                easing: 'easeInQuad',
                duration: 500,
                // delay: 3000
            });

            anime({
                targets: ['#playerName'],
                opacity: [0, 1],
                left: [-120, -100],
                easing: 'easeInQuad',
                duration: 500,
            });


            anime({
                targets: ['.ml1-CommonAnimations_H2TextWrapper'],
                opacity: [0, 1],
                left: [-120, -100],
                easing: 'easeInQuad',
                duration: 500,
            });
            anime({
                targets: ['.ml1-CommonAnimations_Line'],
                opacity: [0, 1],
                left: [300, 310],
                easing: 'easeInQuad',
                duration: 500,
            });





        }

        if (team == 'away') {


            $('#playerName').css('text-align', 'left');
            $('#ballAction').css('text-align', 'left');

            // $('.ml1-CommonAnimations_H1TextWrapper').css('opacity', 0);
            $('.ml1-CommonAnimations_H2TextWrapper').css('opacity', 0);
            $('.ml1-CommonAnimations_Line').css('opacity', 0);

            // $('.ml1-CommonAnimations_H1TextWrapper').css('left', 72);
            $('.ml1-CommonAnimations_H2TextWrapper').css('left', 132);
            $('.ml1-CommonAnimations_Line').css('left', 317);

            // <stop class="gradStart" offset="43.8%" style="stop-opacity: 0.4; stop-color: rgb(24, 84, 53);"></stop>
            // <stop class="gradEnd" offset="100%" style="stop-opacity: 0.4; stop-color: rgb(79, 41, 26);"></stop>

            $('#ml1-Gradient1 .gradStart').attr('offset', '0%');
            $('#ml1-Gradient1 .gradEnd').attr('style', 'stop-opacity: 0.4; stop-color: rgb(79, 41, 26);');


            $('#ml1-Gradient1 .gradEnd').attr('offset', '-20%');
            $('#ml1-Gradient1 .gradStart').attr('style', 'stop-opacity: 0.4; stop-color: rgb(24, 84, 53);');


            $('#playerName').text(this.away);

            $('.ml1-CommonAnimations_H2Text').text(this.word[this.language]['危险进攻']);

            // anime({
            //     targets: '#ml1-Possession1',
            //     d: "M2,2 200,2 200,2 C200,1.4 200,28 200,28 C200,29 200,30 200,31 L200,61 L200,88 C200,89 200,90 200,91 L200,121 L200,146 C200,147 200,150 200,151 L200,178 C200,178 2.0,178 2.0,178 L2,2 Z",
            //     easing: 'easeInQuad',
            //     duration: 500,
            // });

            // anime({
            //     targets: '#ml1-Possession1-2',
            //     // d: 'M2,2 267,2 267,2 C267,1.4 278.7,28 278.7,28 C279,29 279,30 278.7,31 L267,61 L278.7,88 C279,89 279,90 278.7,91 L267,121 L278.7,146 C279,147 279,150 278.7,151 L267,178 C267,178 2.0,178 2.0,178 L2,2 Z',
            //     d: 'M 200,2 133,2 133,2 C133,1.4 122.7,28 122.7,28 C121,29 121,30 121.7,31 L133,61 L121.7,88 C121,89 121,90 121.7,91 L133,121 L121.7,146 C121,147 121,150 121.7,151 L133,178 C133,178 398,178 398,178 L398,2 200,2 Z',
            //     easing: 'easeInQuad',
            //     duration: 500,
            // });

            anime({
                targets: '#ml1-Possession1-2',
                d: 'M398,2 79,2 79,2 C79,1.4 62,28 62,28 C62,29 62,30 62,31 L79,61 L62,88 C62,89 62,90 62,91 L79,121 L62,146 C62,147 62,150 62,151 L79,178 C79,178 398,178 398,178 L398,2 Z',
                easing: 'easeInQuad',
                duration: 500,
                // delay: 3000
            });

            anime({
                targets: ['#playerName'],
                opacity: [0, 1],
                left: [120, 100],
                easing: 'easeInQuad',
                duration: 500,
            });


            anime({
                targets: ['.ml1-CommonAnimations_H2TextWrapper'],
                opacity: [0, 1],
                left: [120, 100],
                easing: 'easeInQuad',
                duration: 500,
            });
            anime({
                targets: ['.ml1-CommonAnimations_Line'],
                opacity: [0, 1],
                left: [100, 90],
                easing: 'easeInQuad',
                duration: 500,
            });





        }
    }

    // 进球
    goal(team = 'home') {
        this.refresh();

        $('#ml1-ShotBase').attr('style', 'display: none');
        $('#ml1-ShotBase_2').attr('style', 'display: none');

        if (team == 'home') {

            $('.ml1-CommonAnimations_H2TextWrapper').css('opacity', 0);
            $('.ml1-CommonAnimations_H2TextWrapper').css('width', '100%');
            $('.ml1-CommonAnimations_H2TextWrapper').css('left', '0');
            $('.ml1-CommonAnimations_H2TextWrapper').css('text-align', 'right');
            $('#ml1-ShotBase').attr('style', 'display: block');

            anime({
                targets: ['.ml1-ShotBase_ShotOffTarget'],
                left: [300, 345],
                easing: 'easeInQuad',
                duration: 500,
            });

            anime({
                targets: ['.ml1-CommonAnimations_H2TextWrapper'],
                opacity: [0, 1],
                left: -60,
                easing: 'easeInQuad',
                duration: 500,
            });

            anime({
                targets: ['#ml1-Possession1-2'],
                opacity: [1, 0],
                // left: 72,
                easing: 'easeInQuad',
                duration: 500,
            });


            // $('.ml1-CommonAnimations_H2Text').text(this.word[this.language]['正中靶心']);
        }
        if (team == 'away') {

            $('.ml1-CommonAnimations_H2TextWrapper').css('opacity', 0);
            $('.ml1-CommonAnimations_H2TextWrapper').css('width', '100%');
            $('.ml1-CommonAnimations_H2TextWrapper').css('left', '0');
            $('.ml1-CommonAnimations_H2TextWrapper').css('text-align', 'left');
            $('#ml1-ShotBase_2').attr('style', 'display: block');

            anime({
                targets: ['.ml1-ShotBase_ShotOffTarget_2'],
                left: [100, 55],
                easing: 'easeInQuad',
                duration: 500,
            });

            anime({
                targets: ['.ml1-CommonAnimations_H2TextWrapper'],
                opacity: [0, 1],
                left: 60,
                easing: 'easeInQuad',
                duration: 500,
            });

            anime({
                targets: ['#ml1-Possession1'],
                opacity: [1, 0],
                // left: 72,
                easing: 'easeInQuad',
                duration: 500,
            });

            // $('.ml1-CommonAnimations_H2Text').text(this.word[this.language]['正中靶心']);
        }
    }

    //射偏
    goal1(team = 'home') {
        this.refresh();

        $('#ml1-ShotBase').attr('style', 'display: none');
        $('#ml1-ShotBase_2').attr('style', 'display: none');

        if (team == 'home') {

            $('.ml1-CommonAnimations_H2TextWrapper').css('opacity', 0);
            $('.ml1-CommonAnimations_H2TextWrapper').css('width', '100%');
            $('.ml1-CommonAnimations_H2TextWrapper').css('left', '0');
            $('.ml1-CommonAnimations_H2TextWrapper').css('text-align', 'center');
            $('#ml1-ShotBase').attr('style', 'display: block');

            anime({
                targets: ['.ml1-ShotBase_ShotOffTarget'],
                left: [300, 345],
                easing: 'easeInQuad',
                duration: 500,
            });

            anime({
                targets: ['.ml1-CommonAnimations_H2TextWrapper'],
                opacity: [0, 1],
                left: 100,
                easing: 'easeInQuad',
                duration: 500,
            });

            anime({
                targets: ['#ml1-Possession1-2'],
                opacity: [1, 0],
                // left: 72,
                easing: 'easeInQuad',
                duration: 500,
            });

            $('.ml1-CommonAnimations_H2Text').text(this.word[this.language]['射偏球门']);
        }
        if (team == 'away') {

            $('.ml1-CommonAnimations_H2TextWrapper').css('opacity', 0);
            $('.ml1-CommonAnimations_H2TextWrapper').css('width', '100%');
            $('.ml1-CommonAnimations_H2TextWrapper').css('left', '0');
            $('.ml1-CommonAnimations_H2TextWrapper').css('text-align', 'center');
            $('#ml1-ShotBase_2').attr('style', 'display: block');

            anime({
                targets: ['.ml1-ShotBase_ShotOffTarget_2'],
                left: [100, 55],
                easing: 'easeInQuad',
                duration: 500,
            });

            anime({
                targets: ['.ml1-CommonAnimations_H2TextWrapper'],
                opacity: [0, 1],
                left: -100,
                easing: 'easeInQuad',
                duration: 500,
            });

            anime({
                targets: ['#ml1-Possession1'],
                opacity: [1, 0],
                // left: 72,
                easing: 'easeInQuad',
                duration: 500,
            });

            $('.ml1-CommonAnimations_H2Text').text(this.word[this.language]['射偏球门']);
        }
    }

    //射正
    goal2(team = 'home') {
        this.refresh();

        $('#ml1-ShotBase').attr('style', 'display: none');
        $('#ml1-ShotBase_2').attr('style', 'display: none');

        if (team == 'home') {



            $('.ml1-CommonAnimations_H2TextWrapper').css('opacity', 0);
            $('.ml1-CommonAnimations_H2TextWrapper').css('width', '100%');
            $('.ml1-CommonAnimations_H2TextWrapper').css('left', '0');
            $('.ml1-CommonAnimations_H2TextWrapper').css('text-align', 'center');
            $('#ml1-ShotBase').attr('style', 'display: block');

            anime({
                targets: ['.ml1-ShotBase_ShotOffTarget'],
                left: [300, 345],
                easing: 'easeInQuad',
                duration: 500,
            });

            anime({
                targets: ['.ml1-CommonAnimations_H2TextWrapper'],
                opacity: [0, 1],
                left: 100,
                easing: 'easeInQuad',
                duration: 500,
            });

            anime({
                targets: ['#ml1-Possession1-2'],
                opacity: [1, 0],
                // left: 72,
                easing: 'easeInQuad',
                duration: 500,
            });

            $('.ml1-CommonAnimations_H2Text').text(this.word[this.language]['射正球门']);
        }
        if (team == 'away') {

            $('.ml1-CommonAnimations_H2TextWrapper').css('opacity', 0);
            $('.ml1-CommonAnimations_H2TextWrapper').css('width', '100%');
            $('.ml1-CommonAnimations_H2TextWrapper').css('left', '0');
            $('.ml1-CommonAnimations_H2TextWrapper').css('text-align', 'center');
            $('#ml1-ShotBase_2').attr('style', 'display: block');

            anime({
                targets: ['.ml1-ShotBase_ShotOffTarget_2'],
                left: [100, 55],
                easing: 'easeInQuad',
                duration: 500,
            });

            anime({
                targets: ['.ml1-CommonAnimations_H2TextWrapper'],
                opacity: [0, 1],
                left: -100,
                easing: 'easeInQuad',
                duration: 500,
            });

            anime({
                targets: ['#ml1-Possession1'],
                opacity: [1, 0],
                // left: 72,
                easing: 'easeInQuad',
                duration: 500,
            });

            $('.ml1-CommonAnimations_H2Text').text(this.word[this.language]['射正球门']);
        }
    }

    //动画暂停 显示状态
    status(textArr) {
        var that = this

        if (typeof textArr == 'string') {
            textArr = [textArr];
        }
        // 如果存在第二个判点球动作，就在 textArr 里添加这个动作
        if (this.secTeamVC) {
            if (secTeamVC[0] === "1") {
                textArr.push("判点球给主队");
            } else {
                textArr.push("判点球给客队");
            }
        }
        //处理多个元素的文本翻译
        for (var i = 0; i < textArr.length; i++) {
            textArr[i] = that.word[that.language][textArr[i]] || textArr[i];
        }

        console.log(textArr);

        var text = textArr.join(' ');

        // text = this.word[this.language][text];

        this.refresh();

        $('.ml1-SoccerClock_Clock').text('00:00');

        // $('.ml1-CommonAnimations_H1TextWrapper').css('opacity', 0);
        // $('.ml1-CommonAnimations_H2TextWrapper').css('opacity', 0);
        // $('.ml1-CommonAnimations_Line').css('opacity', 0);
        // $('#ml1-ShotBase').attr('style', 'display: none');

        $('.ml1-CommonAnimations_H2Text').text(text);
        $('.ml1-CommonAnimations_H2TextWrapper').attr('style',
            'opacity: 1; display: block; text-align: center; left: 0px; top: 79px; width: 100%;');

    }

    refresh() {

        $('.ml1-CommonAnimations_H2TextWrapper').attr('style',
            'opacity: 1; display: block; text-align: center; left: 0px; top: 88px; width: 100%;');


        $('#ballPosition').css('opacity', 0);
        $('#ml1-Possession1').css('opacity', 0);
        $('#ml1-Possession1-2').css('opacity', 0);
        $('#playerName').css('opacity', 0);
        $('#playerName').css('left', 0);
        $('#ballAction').css('opacity', 0);
        $('.ml1-CommonAnimations_Line').css('opacity', 0);
        $('.moveLine').css('opacity', 0);

        $('#ml1-WideKickRadial').css('opacity', 0);
        $('#ml1-NarrowKickRadial').css('opacity', 0);
        $('#ml1-ThrowRadial').css('opacity', 0);

        $('#ball').css('opacity', 0);

        $('.redcard').css('opacity', 0);
        $('.yellowcard').css('opacity', 0);

        $('#ml1-ShotBase').attr('style', 'display: none');
        $('#ml1-ShotBase_2').attr('style', 'display: none');




    }
}


const animationPrepare = `
    <div class="ml1-MatchLiveSoccerModule_PitchContainer">
// <!-- 足球点位 -->
      <div
        id="ballPosition"
        style="
          position: absolute;
          width: 10px;
          height: 10px;
          pointer-events: none;
          display: flex;
          justify-content: center;
          align-items: center;
          left: 0;
          top: 0;
          z-index: 999;
          opacity: 0;
        "
      >
        <svg width="10" height="10" style="overflow: visible">
          <!-- 中心白点 -->
          <circle cx="5" cy="5" r="3" fill="white" class="white-pulse" />
          <circle
            cx="5"
            cy="5"
            r="10"
            fill="rgb(103, 159, 234)"
            class="blue-halo"
          />

          <!-- 辐射动画层 -->
          <circle
            cx="5"
            cy="5"
            r="5"
            stroke="white"
            stroke-width="2"
            stroke-opacity="0.2"
            fill="none"
            class="radiate"
          />
          <circle
            cx="5"
            cy="5"
            r="7"
            stroke="white"
            stroke-width="2"
            stroke-opacity="0.2"
            fill="none"
            class="radiate delay1"
          />
          <circle
            cx="5"
            cy="5"
            r="9"
            stroke="white"
            stroke-width="2"
            stroke-opacity="0.2"
            fill="none"
            class="radiate delay2"
          />
        </svg>
      </div>

      <style>
        /* 新增白点动画 */
        @keyframes white-pulse {
          0%,
          100% {
            transform: scale(1);
          }
          50% {
            transform: scale(0.8);
          }
        }

        .white-pulse {
          animation: white-pulse 1.5s infinite ease-in-out;
          transform-origin: 50% 50%;
        }

        @keyframes halo-pulse {
          0% {
            transform: scale(0.5);
            opacity: 0.6;
          }
          50% {
            transform: scale(1.2);
            opacity: 0.2;
          }
          100% {
            transform: scale(0.5);
            opacity: 0.6;
          }
        }

        .blue-halo {
          animation: halo-pulse 2s infinite linear;
          transform-origin: 50% 50%;
        }

        @keyframes radiate {
          0% {
            transform: scale(1);
            stroke-opacity: 0.2;
          }
          100% {
            transform: scale(3);
            stroke-opacity: 0;
          }
        }

        .radiate {
          animation: radiate 3s infinite linear;
          transform-origin: 50% 50%;
        }
        .delay1 {
          animation-delay: 1s;
        }
        .delay2 {
          animation-delay: 2s;
        }
      </style>
      
      //  <!-- 这个svg是用来显示一些线条 -->
      <svg
        style="position: absolute; z-index: 9"
        class="moveLine"
        viewBox="0 0 400 180"
      >
        <line
          id="animatedLine1"
          x1="0"
          y1="0"
          x2="0"
          y2="0"
          stroke="yellow"
          stroke-width="2"
          stroke-dasharray="5,5"
          stroke-opacity="1"
        />
        <line
          id="animatedLine2"
          x1="0"
          y1="0"
          x2="0"
          y2="0"
          stroke="yellow"
          stroke-width="2"
          stroke-dasharray="5,5"
          stroke-opacity="1"
        />
        <line
          id="animatedLine3"
          x1="0"
          y1="0"
          x2="0"
          y2="0"
          stroke="yellow"
          stroke-width="2"
          stroke-dasharray="5,5"
          stroke-opacity="1"
        />
        <line
          id="animatedLine4"
          x1="0"
          y1="0"
          x2="0"
          y2="0"
          stroke="yellow"
          stroke-width="2"
          stroke-dasharray="5,5"
          stroke-opacity="1"
        />
        <line
          id="animatedLine5"
          x1="0"
          y1="0"
          x2="0"
          y2="0"
          stroke="yellow"
          stroke-width="2"
          stroke-dasharray="5,5"
          stroke-opacity="1"
        />
        <line
          id="animatedLine6"
          x1="0"
          y1="0"
          x2="0"
          y2="0"
          stroke="yellow"
          stroke-width="2"
          stroke-dasharray="5,5"
          stroke-opacity="1"
        />
        <line
          id="animatedLine7"
          x1="0"
          y1="0"
          x2="0"
          y2="0"
          stroke="yellow"
          stroke-width="2"
          stroke-dasharray="5,5"
          stroke-opacity="1"
        />
        <line
          id="animatedLine8"
          x1="0"
          y1="0"
          x2="0"
          y2="0"
          stroke="yellow"
          stroke-width="2"
          stroke-dasharray="5,5"
          stroke-opacity="1"
        />
        <line
          id="animatedLine9"
          x1="0"
          y1="0"
          x2="0"
          y2="0"
          stroke="yellow"
          stroke-width="2"
          stroke-dasharray="5,5"
          stroke-opacity="1"
        />
        <line
          id="animatedLine10"
          x1="0"
          y1="0"
          x2="0"
          y2="0"
          stroke="yellow"
          stroke-width="2"
          stroke-dasharray="5,5"
          stroke-opacity="1"
        />
      </svg>
      <!-- 比赛进行时间 -->
      <div class="ml1-SoccerClock" style="opacity: 0">
        <div class="ml1-SoccerClock_TimerOuterWrapper">
          <div class="ml1-SoccerClock_Timer">
            <div
              class="ml1-SoccerClock_TimerInnerWrapper ml1-SoccerClock_TimerInnerWrapper-show"
            >
              <span class="ml1-SoccerClock_Clock">69:58</span>
            </div>
            <span
              class="ml1-SoccerClock_InjuryTime ml1-SoccerClock_Timer-empty ml1-SoccerClock_InjuryTimeFadeOut"
            ></span>
          </div>
        </div>
      </div>

      <!-- 绘制足球场 -->
      <div class="ml1-MatchLiveSoccerModule_SVGPitchContainer">
        <svg
          class="ml1-MatchLiveSoccerModule_PitchSvg"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 400 180"
          version="1.1"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
        >
          <defs>
            <!-- 定义一些渐变色 -->
            <!-- This is where the colours get pumped when the possession changes -->
            <linearGradient id="ml1-Gradient1">
              <stop
                class="gradStart"
                offset="10%"
                style="stop-opacity: 0.4; stop-color: rgb(24, 84, 53)"
              ></stop>
              <stop
                class="gradEnd"
                offset="100%"
                style="stop-opacity: 0.4; stop-color: rgb(24, 57, 36)"
              ></stop>
            </linearGradient>

            <linearGradient id="ml1-Gradient2">
              <stop
                class="gradStart"
                offset="0%"
                style="stop-opacity: 0.4; stop-color: rgb(24, 57, 36)"
              ></stop>
              <stop
                class="gradEnd"
                offset="65.3%"
                style="stop-opacity: 0.4; stop-color: rgb(24, 84, 53)"
              ></stop>
            </linearGradient>

            <linearGradient id="ml1-SolidTeamColour">
              <stop id="ml1-SolidTeam1" offset="0%" stop-color="#FFDF1B"></stop>
              <stop
                id="ml1-SolidTeam2"
                offset="100%"
                stop-color="#FFDF1B"
              ></stop>
            </linearGradient>
          </defs>

          <g
            id="pitch"
            stroke="none"
            stroke-width="1"
            fill="none"
            fill-rule="evenodd"
          >
            <path fill="#222" d="M0 0h400v180h-400z"></path>
            <rect
              id="pitch-BG"
              fill="#35713D"
              x="0"
              y="0"
              width="400"
              height="180"
            ></rect>
            <rect
              id="18-yard-away"
              stroke="#3D8246"
              stroke-width="2"
              x="348"
              y="44"
              width="51"
              height="93"
            ></rect>
            <rect
              id="18-yard-home"
              stroke="#3D8246"
              stroke-width="2"
              x="1"
              y="44"
              width="51"
              height="93"
            ></rect>
            <path
              d="M199,3 L199,178 L199,179 L201,179 L201,178 L201,3 L201,2 L199,2 L199,3 L199,3 Z"
              id="Shape"
              fill="#3D8246"
            ></path>
            <path
              d="M200,118 L200,118 C215.463973,118 228,105.463973 228,90 C228,74.536027 215.463973,62 200,62 C184.536027,62 172,74.536027 172,90 C172,105.463973 184.536027,118 200,118 L200,118 Z M200,120 L200,120 C183.431458,120 170,106.568542 170,90 C170,73.4314575 183.431458,60 200,60 C216.568542,60 230,73.4314575 230,90 C230,106.568542 216.568542,120 200,120 L200,120 Z"
              id="Shape-Copy"
              fill="#3D8246"
            ></path>
            <circle
              id="Oval-344"
              fill="#3D8246"
              cx="200"
              cy="90"
              r="6"
            ></circle>
            <path
              d="M74,63 C65.5522257,68.9666814 60,79.0570309 60,90.5 C60,101.942969 65.5522257,112.033319 74,118"
              id="d-left"
              stroke="#3D8246"
              stroke-width="2"
              transform="translate(67.000000, 90.500000) scale(-1, 1) translate(-59.000000, -90.500000) "
            ></path>
            <circle id="Oval-70" fill="#3D8246" cx="34" cy="90" r="3"></circle>
            <path
              d="M1,11 C6.5228475,11 11,6.5228475 11,1 L9.046875,1 C9.046875,5.44416635 5.44416635,9.046875 1,9.046875 L1,11 L1,11 Z"
              id="Shape"
              fill="#3D8246"
            ></path>
            <path
              d="M1,171 C5.418278,171 9,174.581722 9,179 L11,179 C11,173.477153 6.5228475,169 1,169 L1,171 L1,171 Z"
              id="Shape"
              fill="#3D8246"
            ></path>
            <path
              d="M337.884236,62 C328.64831,68.2472191 323,78.6467666 323,90 C323,101.353233 328.64831,111.752781 337.884236,118 L339,116.354082 C330.305144,110.472845 324.989964,100.686649 324.989964,90 C324.989964,79.3133507 330.305144,69.5271551 339,63.645918 L337.884236,62 L337.884236,62 Z"
              transform="translate(9,0)"
              id="Shape-Copy-2"
              fill="#3D8246"
            ></path>
            <rect
              id="6-yard-home"
              stroke="#3D8246"
              stroke-width="2"
              x="1"
              y="69"
              width="16"
              height="41"
            ></rect>
            <path
              d="M399,69 L383,69 L383,110 L399,110 L399,69 L399,69 Z"
              id="6-yard-away"
              stroke="#3D8246"
              stroke-width="2"
              sketch:type="MSShapeGroup"
            ></path>
            <circle id="Oval-70" fill="#3D8246" cx="365" cy="90" r="3"></circle>
            <path
              d="M399,9.046875 C394.555834,9.046875 390.953125,5.44416635 390.953125,1 L389,1 C389,6.5228475 393.477153,11 399,11 L399,9.046875 L399,9.046875 Z"
              id="Shape"
              fill="#3D8246"
            ></path>
            <path
              d="M399,169 C393.477153,169 389,173.477153 389,179 L391,179 C391,174.581722 394.581722,171 399,171 L399,169 L399,169 Z"
              id="Shape"
              fill="#3D8246"
            ></path>
            <rect
              stroke="#3D8246"
              stroke-width="2"
              x="1"
              y="1"
              width="398"
              height="178"
            ></rect>
          </g>

          <!-- 左边半场阴影 -->
          <path
            class="ml1-SoccerPitch_AnimationElement"
            id="ml1-Possession1"
            opacity="0"
            d="M
          2,2 
          200,2 
          200,2 
          C
          200,2
          200,28 
          200,28 
          C
          200,29 
          200,30 
          200,31 
          L
          200,61 
          L
          200,88 
          C
          200,89 
          200,90 
          200,91 
          L
          200,121 
          L
          200,146 
          C
          200,147 
          200,150 
          200,151 
          L
          200,178 
          C
          200,178 
          2.0,178 
          2.0,178 
          L
          2,2 Z"
            fill="url(#ml1-Gradient1)"
          ></path>

          <!-- 右边半场阴影 -->
          <path
            class="ml1-SoccerPitch_AnimationElement"
            id="ml1-Possession1-2"
            opacity="0"
            d="M400,2 200,2 200,2 C200,1.4 200,28 200,28 C200,29 200,30 200,31 L200,61 L200,88 C200,89 200,90 200,91 L200,121 L200,146 C200,147 200,150 200,151 L200,178 C200,178 400,178 400,178 L400,2 Z"
            ,
            d1="M 133,2 133,2 C133,1.4 122.7,28 122.7,28 C121,29 121,30 121.7,31 L133,61 L121.7,88 C121,89 121,90 121.7,91 L133,121 L121.7,146 C121,147 121,150 121.7,151 L133,178 C133,178 398,178 398,178 L398,2 133,2 Z"
            ,
            d2="M
          200,2 
          400,2 
          400,2 
          C
          400,2
          400,28 
          400,28 
          C
          400,29 
          400,30 
          400,31 
          L
          400,61 
          L
          400,88 
          C
          400,89 
          400,90 
          400,91 
          L
          400,121 
          L
          400,146 
          C
          400,147 
          400,150 
          400,151 
          L
          400,178 
          C
          400,178 
          200,178 
          200,178 
          L
          200,2 
          Z"
            fill="url(#ml1-Gradient1)"
          ></path>

          <!-- 向左边进攻 -->
          <path
            class="ml1-SoccerPitch_AnimationElement"
            id="ml1-Possession2"
            d="M398,2 132.03710743801653,2 131.4305785123967,2 C131.4305785123967,1 119.90652892561985,28 119.90652892561985,28 C119.30000000000001,29 119.30000000000001,30 119.90652892561985,31 L131.4305785123967,61 L119.90652892561985,88 C119.30000000000001,89 119.30000000000001,90 119.90652892561985,91 L131.4305785123967,121 L119.90652892561985,146 C119.30000000000001,147 119.30000000000001,150 119.30000000000001,151 L131.4305785123967,178 C131.4305785123967,178 398.0,178 398.0,178 L398,2 Z"
            fill="url(#ml1-Gradient2)"
            opacity="0"
          ></path>

          <!--球门球-->
          <g
            class="ml1-SoccerPitch_AnimationElement"
            id="ml1-WideKickRadial"
            opacity="0"
          >
            <path
              id="ml1-WideKickRadialOuter"
              fill="#165031"
              d="M94.703,73.698C110.554,53.359,120,27.784,120,0c0-27.764-9.433-53.321-25.262-73.653L0,0.036L94.703,73.698z"
              style="opacity: 1"
            ></path>
            <path
              id="ml1-WideKickRadialCentre"
              fill="#165031"
              d="M62.325,48.514C72.765,35.123,79,18.294,79,0c0-18.274-6.222-35.085-16.639-48.469L0,0.036L62.325,48.514z"
              style="opacity: 1"
            ></path>
            <path
              id="ml1-WideKickRadialInner"
              fill="#165031"
              d="M30.759,23.961C35.918,17.349,39,9.037,39,0c0-9.017-3.068-17.311-8.205-23.917L0,0.036L30.759,23.961z"
              style="opacity: 1"
            ></path>
          </g>

          <!--角球 任意球-->
          <g
            class="ml1-SoccerPitch_AnimationElement"
            id="ml1-NarrowKickRadial"
            opacity="0"
            transform="translate(0, 0) rotate(45)"
          >
            <path
              id="ml1-NarrowKickRadialOuter"
              fill="#165031"
              d="M0.031,0.013l117.647,45.045C123.041,31.064,126,15.881,126,0s-2.959-31.065-8.322-45.059L0.093-0.036L0.031,0.013z"
              style="opacity: 1"
            ></path>
            <path
              id="ml1-NarrowKickRadialCentre"
              fill="#165031"
              d="M0.031,0.013l77.43,29.647c3.536-9.21,5.488-19.204,5.488-29.66s-1.952-20.45-5.487-29.66L0.093-0.036L0.031,0.013z"
              style="opacity: 1"
            ></path>
            <path
              id="ml1-NarrowKickRadialInner"
              fill="#165031"
              d="M0.031,0.013l38.208,14.629c1.746-4.546,2.71-9.48,2.71-14.642s-0.964-10.096-2.709-14.642L0.093-0.036L0.031,0.013z"
              style="opacity: 1"
            ></path>
          </g>

          <!--边线球 界外球-->
          <g
            class="ml1-SoccerPitch_AnimationElement"
            id="ml1-ThrowRadial"
            opacity="0"
            transform="translate(0, 0) rotate(90)"
          >
            <path
              id="ml1-ThrowRadialOuter"
              fill="#165031"
              d="M53.033,53.068c29.289-29.289,29.289-76.777,0-106.066L0,0.035L53.033,53.068z"
              class=""
              style="opacity: 0.22; transform: scaleX(1) scaleY(1)"
            ></path>
            <path
              id="ml1-ThrowRadialInner"
              fill="#165031"
              d="M26.517,26.552c14.646-14.645,14.644-38.39,0-53.033L0,0.035L26.517,26.552z"
              class=""
              style="opacity: 0.66; transform: scaleX(1) scaleY(1)"
            ></path>
          </g>
        </svg>
      </div>

      <div class="ml1-MatchLiveSoccerModule_AnimWrapper">
        <div class="ml1-AnimatedTextBar">
          <!--球员中文名  上方-->
          <div
            id="playerName"
            class="ml1-AnimatedTextBar ml1-CommonAnimations_Asset ml1-CommonAnimations_H1TextWrapper"
            style="
              opacity: 0;
              display: block;
              text-align: right;
              left: 0px;
              top: 70.5px;
              width: 100%;
            "
          >
            <span class="ml1-AnimatedTextBar ml1-CommonAnimations_H1Text"
              >主队</span
            >
          </div>

          <!-- 球动作 中间-->
          <div
            id="ballAction"
            class="ml1-AnimatedTextBar ml1-CommonAnimations_Asset ml1-CommonAnimations_H2TextWrapper"
            style="
              opacity: 0;
              display: block;
              text-align: right;
              left: 0px;
              top: 88px;
              width: 100%;
            "
          >
            <span class="ml1-AnimatedTextBar ml1-CommonAnimations_H2Text"
              >控球</span
            >
          </div>

          <!-- 球员英文名 下方 不常用-->
          <div
            id="playerNameEn"
            class="ml1-AnimatedTextBar ml1-CommonAnimations_Asset ml1-CommonAnimations_H1TextBackupWrapper ml1-CommonAnimations_H1TextBackup"
            style="
              opacity: 0;
              display: block;
              top: 120.5px;
              width: 180px;
              text-align: left;
              left: 88px;
            "
          >
            <span class="ml1-AnimatedTextBar">Home Player</span>
          </div>

          <!-- 颜色分割线 -->
          <div
            class="ml1-CommonAnimations_Line"
            style="
              opacity: 0;
              background-color: rgb(196, 0, 16);
              left: 191px;
              top: 72px;
              height: 39px;
              transform: rotateZ(0deg);
            "
          ></div>

          <!-- 红黄牌 -->
          <div
            class="redcard"
            style="
              width: 400px;
              opacity: 0;
              height: 180px;
              display: flex;
              position: absolute;
              align-content: flex-start;
              justify-content: space-evenly;
              align-items: center;
            "
          >
            <img src="redcard.png" alt="" srcset="" width="50px" />
          </div>

          <div
            class="yellowcard"
            style="
              width: 400px;
              opacity: 0;
              height: 180px;
              display: flex;
              position: absolute;
              align-content: flex-start;
              justify-content: space-evenly;
              align-items: center;
            "
          >
            <img src="yellowcard.png" alt="" srcset="" width="50px" />
          </div>

          <!-- -还没有找到用途------------------------------------------- -->
          <!-- 球员中文名 goust -->
          <div
            class="ml1-AnimatedTextBar ml1-CommonAnimations_Asset ml1-CommonAnimations_H1TextGhostWrapper"
            style="display: none; width: 180px; text-align: right"
          >
            <span class="ml1-AnimatedTextBar ml1-CommonAnimations_H1TextGhost"
              >主队球员</span
            >
          </div>

          <!-- 危險進攻 -->
          <div
            class="ml1-AnimatedTextBar ml1-CommonAnimations_Asset ml1-CommonAnimations_H2TextBackupWrapper"
            style="
              display: block;
              opacity: 0;
              top: 138px;
              width: 180px;
              text-align: left;
              left: 88px;
            "
          >
            <span
              class="ml1-AnimatedTextBar ml1-CommonAnimations_H2TextBackup"
              >危險進攻</span
            >
          </div>

          <!-- 控球 -->
          <div
            class="ml1-AnimatedTextBar ml1-CommonAnimations_Asset ml1-CommonAnimations_H2TextGhostWrapper"
            style="display: none; width: 180px; text-align: right"
          >
            <span class="ml1-AnimatedTextBar ml1-CommonAnimations_H2TextGhost"
              >控球</span
            >
          </div>

          <div
            class="ml1-AnimatedTextBar ml1-CommonAnimations_Asset ml1-CommonAnimations_H3TextWrapper"
            style="display: none; opacity: 0"
          >
            <span
              class="ml1-AnimatedTextBar ml1-CommonAnimations_H3Text"
            ></span>
          </div>

          <div
            class="ml1-AnimatedTextBar ml1-CommonAnimations_Asset ml1-CommonAnimations_H3TextBackupWrapper"
            style="display: none"
          >
            <span
              class="ml1-AnimatedTextBar ml1-CommonAnimations_H3TextBackup"
            ></span>
          </div>

          <div
            class="ml1-AnimatedTextBar ml1-CommonAnimations_Asset ml1-CommonAnimations_H3TextGhostWrapper"
            style="display: none"
          >
            <span
              class="ml1-AnimatedTextBar ml1-CommonAnimations_H3TextGhost"
            ></span>
          </div>
        </div>

        <div class="ml1-PossessionHistoryCanvas">
          <svg class="ml1-PossessionHistoryCanvas_Canvas"></svg>
        </div>

        <div
          class="ml1-XYBlob_PassDestination"
          style="left: 384px; top: 72px"
        >
          <div class="ml1-XYBlob_PassDestinationOuter">
            <div class="ml1-XYBlob_PassDestinationInner"></div>
          </div>
        </div>

        <!-- 足球 -->
        <div
          id="ball"
          class="ml1-XYBlob ml1-XYBlob_Static"
          style="
            opacity: 0;
            left: 200px;
            top: 90px;
            transform: none;
            transition: none 0s ease 0s;
          "
        >
          <div
            class="ml1-XYBlob_Inner1"
            style="border: 2px solid rgb(103, 159, 234)"
          ></div>
          <div
            class="ml1-XYBlob_Inner2"
            style="background-color: rgb(103, 159, 234)"
          ></div>
          <div class="ml1-XYBlob_Inner3"></div>
        </div>

        <!-- 主队进球 -->
        <div id="ml1-ShotBase" style="display: none">
          <div
            class="ml1-CommonAnimations_Asset ml1-CommonAnimations_Icon ml1-ShotBase_Goal2"
            style="
              display: block;
              opacity: 1;
              left: 340px;
              top: 75.5px;
              transform: scaleX(1);
            "
          ></div>
          <div
            class="ml1-CommonAnimations_Asset ml1-CommonAnimations_Icon ml1-ShotBase_ShotOffTarget"
            style="
              display: block;
              left: 343px;
              top: 77.5px;
              opacity: 1;
              transform: scaleX(1);
            "
          ></div>
        </div>

        <!-- 客队进球 -->
        <div id="ml1-ShotBase_2" style="display: none">
          <!-- 客队进球 -->
          <div
            class="ml1-CommonAnimations_Asset ml1-CommonAnimations_Icon ml1-ShotBase_Goal2_2"
            style="
              display: block;
              opacity: 1;
              left: 60px;
              top: 75.5px;
              transform: rotateY(180deg);
            "
          ></div>
          <div
            class="ml1-CommonAnimations_Asset ml1-CommonAnimations_Icon ml1-ShotBase_ShotOffTarget_2"
            style="
              display: block;
              left: 57px;
              top: 77.5px;
              opacity: 1;
              transform: rotateY(180deg);
            "
          ></div>
        </div>
      </div>
    </div>
`;


function handleData(data) {
    // data.home = home;
    // data.away = away;
    // data.home_en = home_en;
    // data.away_en = away_en;

    if (window.lastData == JSON.stringify(data)) {
      console.log("动作没有发生变化");
      return;
    }

    window.lastData = JSON.stringify(data);

    if (data.VC == "") {
      // 数据缺失
      return;
    }

    // 开始处理VC动作，首先处理状态的动作，下面都是状态，不需要区分主客队
    switch (true) {
      // 处理状态的动作
      case data.VC.includes("KickOff"):
        soccer.status("上半场");
        return;
      case data.VC.includes("HalfTime"):
        soccer.status("半场结束");
        return;
      case data.VC.includes("SecondHalf"):
        soccer.status("下半场");
        return;
      case data.VC.includes("FullTime"):
        soccer.status("全场结束");
        return;
      case data.VC.includes("StartExtraTime1"):
        soccer.status("加时赛上半场");
        return;
      case data.VC.includes("ExtraTimeHalfTime"):
        soccer.status("加时赛半场结束");
        return;
      case data.VC.includes("StartExtraTime2"):
        soccer.status("加时赛下半场");
        return;
      case data.VC.includes("EndOfExtraTime"):
        soccer.status("加时赛结束");
        return;
      case data.VC.includes("PenaltyShootout"):
        soccer.status("点球大战");
        return;
      case data.VC.includes("InjuryTime"):
        soccer.status("伤停补时");
        return;
    }

    // 继续处理其余VC动作，首先检查是否包含有球员信息，有的话就用球员信息替代球队名字显示
    if (data.PG && !data.PG.includes("~")) {
      // 当PG不为空并且 PG 不包含 "~"（包含~代表是点球大战的信息）时就代表这里是球员名字
      soccer.home = `${data.PG}｜${soccer.word[soccer.language]['主队']}`;
      soccer.away = `${soccer.word[soccer.language]['客队']}｜${data.PG}`;
    } 

    // 然后检查是否为两个动作的组合，有第二个动作的话都会是判点球
    if (data.VC.includes("&")) {
      const VCs = data.VC.split("&");
      data.VC = VCs[0];
      soccer.secTeamVC = VCs[1].split("-");
    }

    // 然后处理主客队
    let VC = data.VC;
    let team = "";
    if (data.VC.includes("-")) {
      const teamVC = data.VC.split("-");
      team = teamVC[0];
      VC = teamVC[1];
    }

    //处理运动轨迹，只在控球、进攻和危险进攻的时候有轨迹
    if (["DangerousAttack", "Attack", "InPossession"].includes(VC)) {
      soccer.move(data);
    } else {
      soccer.record(data);
    }

    // 进球、黄牌和红牌包含个数 1-Goal_2：主客队 动作 个数
    if (VC.includes("_")) {
      const vcNum = VC.split("_");
      const action = vcNum[0];
      const count = vcNum[1];

      switch (action) {
        case "Goal":
          if (team == 1) {
            soccer.status(["主队", "进球数", count]);
            soccer.goal("home");
          } else if (team == 2) {
            soccer.status(["客队", "进球数", count]);
            soccer.goal("away");
          }
          break;

        case "YellowCard":
          if (team == 1) {
            soccer.status(["主队", "黄牌数", count]);
            soccer.yellowCard("home");
          } else if (team == 2) {
            soccer.status(["客队", "黄牌数", count]);
            soccer.yellowCard("away");
          }
          break;

        case "RedCard":
          if (team == 1) {
            soccer.status(["主队", "红牌数", count]);
            soccer.redCard("home");
          } else if (team == 2) {
            soccer.status(["客队", "红牌数", count]);
            soccer.redCard("away");
          }
          break;
      }

      return;
    }

    // 其余动作，根据 VC 动作处理
    switch (VC) {
      //以下动作可能有坐标信息
      //角球，1-Corner：角球都是固定位置，此处根据角球坐标来判断主客队以及上下角球位置
      case "Corner":
        if (data.XY != "" && team != "") {
          const coord = data.XY.split(",").map(Number);
          if (coord[0] > 0.5 && coord[1] < 0.5) {
            soccer.corner(1);
          } else if (coord[0] > 0.5 && coord[1] > 0.5) {
            soccer.corner(2);
          } else if (coord[0] < 0.5 && coord[1] < 0.5) {
            soccer.corner(3);
          } else if (coord[0] < 0.5 && coord[1] > 0.5) {
            soccer.corner(4);
          }
        } else {
          soccer.status("角球");
        }
        return;

      //界外球，1-Throw
      case "Throw":
        if (data.XY != "" && team != "") {
          soccer.throw(data);
        } else {
          soccer.status("界外球");
        }
        return;

      // 任意球，1-DangerousFreeKick，1-FreeKick
      case "DangerousFreeKick":
      case "FreeKick":
        if (data.XY != "" && team != "") {
          soccer.freeKick(data);
        } else {
          soccer.status(VC === "DangerousFreeKick" ? "危险任意球" : "任意球");
        }
        return;
      
      // 以下动作没有坐标信息，但是有额外的动作处理
      //危险进攻，1-DangerousAttack
      case "DangerousAttack":
        if (team == 1) {
          soccer.attack2("home");
        } else if (team == 2) {
          soccer.attack2("away");
        }
        return;

      //进攻，1-Attack
      case "Attack":
        if (team == 1) {
          soccer.attack1("home");
        } else if (team == 2) {
          soccer.attack1("away");
        }
        return;

      //控球，1-InPossession
      case "InPossession":
        if (team == 1) {
          soccer.attack0("home");
        } else if (team == 2) {
          soccer.attack0("away");
        }
        return;

      //球门球
      case "GoalKick":
        if (team == 1) {
          soccer.goalKick("1");
        } else if (team == 2) {
          soccer.goalKick("2");
        } else {
          soccer.status("球门球");
        }
        return;

      //射正球门
      case "ShotOnTarget":
        if (team == 1) {
          soccer.goal2("home");
        } else if (team == 2) {
          soccer.goal2("away");
        } else {
          soccer.status("射正球门");
        }
        return;

      //射偏球门
      case "ShotOffTarget":
        if (team == 1) {
          soccer.goal1("home");
        } else if (team == 2) {
          soccer.goal1("away");
        } else {
          soccer.status("射偏球门");
        }
        return;

      //以下动作只显示状态没有动作
      //判点球
      case "Penalty":
        soccer.status(team == 1 ? ["判点球给", "主队"] : team == 2 ? ["判点球给", "客队"] : "判点球");
        return;

      //射中点球
      case "ShootoutScore":
        soccer.status(team == 1 ? ["主队", "射中点球"] : team == 2 ? ["客队", "射中点球"] : "射中点球");
        return;

      case "ShootoutMiss":
        soccer.status(team == 1 ? ["主队", "射失点球"] : team == 2 ? ["客队", "射失点球"] : "射失点球");
        return;

      case "Substitution":
        soccer.status(team == 1 ? ["主队", "更换替补"] : team == 2 ? ["客队", "更换替补"] : "更换替补");
        return;

      case "Injury":
        soccer.status(team == 1 ? ["主队", "受伤"] : team == 2 ? ["客队", "受伤"] : "受伤");
        return;

      case "Offside":
        soccer.status(team == 1 ? ["主队", "越位"] : team == 2 ? ["客队", "越位"] : "越位");
        return;

      case "PossibleGoal":
        soccer.status(team == 1 ? ["主队", "可能进球"] : team == 2 ? ["客队", "可能进球"] : "可能进球");
        return;

      case "InProgress":
        soccer.status(team == 1 ? ["主队", "审查中"] : team == 2 ? ["客队", "审查中"] : "审查中");
        return;

      case "ReviewingRedCard":
        soccer.status(team == 1 ? ["主队", "审查红牌"] : team == 2 ? ["客队", "审查红牌"] : "审查红牌");
        return;

      case "ReviewingGoal":
        soccer.status(team == 1 ? ["主队", "审查进球"] : team == 2 ? ["客队", "审查进球"] : "审查进球");
        return;

      case "ReviewingPenalty":
        soccer.status(team == 1 ? ["主队", "审查点球"] : team == 2 ? ["客队", "审查点球"] : "审查点球");
        return;

      case "PossibleRedCard":
        soccer.status(team == 1 ? ["主队", "可能红牌"] : team == 2 ? ["客队", "可能红牌"] : "可能红牌");
        return;

      case "PossiblePenalty":
        soccer.status(team == 1 ? ["主队", "可能点球"] : team == 2 ? ["客队", "可能点球"] : "可能点球");
        return;

      case "CheckCompleteNoRedCard":
        soccer.status(team == 1 ? ["主队", "无红牌"] : team == 2 ? ["客队", "无红牌"] : "无红牌");
        return;

      case "CheckCompleteNoGoal":
        soccer.status(team == 1 ? ["主队", "进球无效"] : team == 2 ? ["客队", "进球无效"] : "进球无效");
        return;

      case "CheckCompleteNoPenalty":
        soccer.status(team == 1 ? ["主队", "无点球"] : team == 2 ? ["客队", "无点球"] : "无点球");
        return;

      default:
        console.log(data, "这个事件没有记录");
        return;
    }
}

function scalePitch() {
        const container = document.querySelector('.ml1-MatchLiveSoccerModule_PitchContainer');
        const aspectRatio = 400 / 180;
        
        // 根据窗口尺寸计算缩放比例
        const widthScale = document.body.querySelector("#iframeContent").offsetWidth / 400;
        const heightScale = document.body.querySelector("#iframeContent").offsetHeight / 180;
        // const scale = Math.min(widthScale, heightScale);  // 取最小缩放比例
        const scale = widthScale;  // 取最小缩放比例
        
        // container.style.transform = `scale(${scale})`;

        document.body.querySelector(".anime").style.transform = `scale(${scale})`;
        document.body.querySelector(".anime").style.transformOrigin = "top left";  // 设置变换原点为左上角

        document.body.querySelector(".moveLine").style.transform = `scale(${scale})`;
        document.body.querySelector(".moveLine").style.transformOrigin = "top left";  // 设置变换原点为左上角
}

window.addEventListener('load', () => {
    
  // 设置容器定位到左上角
  const container = document.querySelector('.ml1-MatchLiveSoccerModule_PitchContainer');
  container.style.left = "130";
  container.style.top = "0";
  container.style.transformOrigin = "0 0";  // 设置变换原点为左上角
  
  scalePitch();
  window.addEventListener('resize', scalePitch);
});